<template>
    <div>
        <ul>
            <li v-for="(item,index) in list">
            {{index+1}}-{{item.name}}-{{item.price}}
            </li>
        </ul>
        <button @click="addItem">add Item</button> 
        <br/>
        <button @click="updateItem">Update Item</button>
    </div>
</template>

<script>
import Vue from 'vue'
export default{
    data(){
        return {
            list:[ // 数组循环绑定
                {  
                name:'芒果',
                price:1
                },
                 {  
                name:'苹果',
                price:2
                },
                 {  
                name:'香蕉',
                price:3
                }
            ]
        }
    },
    methods:{
        addItem(){
            console.log(this.list)
            this.list.push({name:'草莓',price:12})
        },
        updateItem(){
            // 全局更新
            Vue.set(this.list,1,{
                name:'石榴',
                price:50
            });
            
           
        }
    }
}
</script>